import React, { useEffect, useState } from 'react';
import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { observer } from 'mobx-react-lite';
import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { RootStackParamList } from '@/route/Route';

type MessageDetailPageNavigationProp = StackNavigationProp<
  RootStackParamList,
  'MessageDetail'
>;
type MessageDetailPageRouteProp = RouteProp<
  RootStackParamList,
  'MessageDetail'
>;

export const MessageDetailPage = observer(() => {
  const navigation = useNavigation<MessageDetailPageNavigationProp>();
  const route = useRoute<MessageDetailPageRouteProp>();
  const { messageId } = route.params;
  const [message, setMessage] = useState<any>(null);

  useEffect(() => {
    // Mock 消息数据
    const mockMessage = {
      id: messageId,
      title: '系统通知',
      content: `欢迎使用 AutoCost！

我们为您提供了完整的汽车费用管理功能，帮助您更好地管理车辆支出。

主要功能包括：
• 费用记录：记录加油、保养、维修等各项费用
• 费用分析：查看费用趋势和统计图表
• 保养提醒：及时提醒保养时间
• 数据同步：云端备份和跨设备同步
• 费用导出：支持多种格式导出

如果您在使用过程中遇到任何问题，请随时联系我们的客服团队。

感谢您选择 AutoCost！`,
      time: '2024-01-15 14:30',
      type: 'system',
      isRead: true,
    };
    setMessage(mockMessage);
  }, [messageId]);

  const handleBack = () => {
    navigation.goBack();
  };

  const handleDelete = () => {
    // 删除消息的逻辑
    navigation.goBack();
  };

  if (!message) {
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.header}>
          <TouchableOpacity style={styles.backButton} onPress={handleBack}>
            <Ionicons name="arrow-back" size={24} color="#1e293b" />
          </TouchableOpacity>
          <Text style={styles.headerTitle}>消息详情</Text>
          <View style={styles.placeholder} />
        </View>
        <View style={styles.loadingContainer}>
          <Text style={styles.loadingText}>加载中...</Text>
        </View>
      </SafeAreaView>
    );
  }

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity style={styles.backButton} onPress={handleBack}>
          <Ionicons name="arrow-back" size={24} color="#1e293b" />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>消息详情</Text>
        <TouchableOpacity style={styles.deleteButton} onPress={handleDelete}>
          <Ionicons name="trash-outline" size={20} color="#ef4444" />
        </TouchableOpacity>
      </View>

      <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
        <View style={styles.messageCard}>
          <View style={styles.messageHeader}>
            <View style={styles.messageAvatar}>
              <Ionicons
                name={message.type === 'system' ? 'settings' : 'notifications'}
                size={24}
                color="#0ea5e9"
              />
            </View>
            <View style={styles.messageInfo}>
              <Text style={styles.messageTitle}>{message.title}</Text>
              <Text style={styles.messageTime}>{message.time}</Text>
            </View>
          </View>

          <View style={styles.messageContent}>
            <Text style={styles.messageText}>{message.content}</Text>
          </View>
        </View>

        <View style={styles.actions}>
          <TouchableOpacity style={styles.actionButton}>
            <Ionicons name="share-outline" size={20} color="#64748b" />
            <Text style={styles.actionText}>分享</Text>
          </TouchableOpacity>

          <TouchableOpacity style={styles.actionButton}>
            <Ionicons name="copy-outline" size={20} color="#64748b" />
            <Text style={styles.actionText}>复制</Text>
          </TouchableOpacity>

          <TouchableOpacity style={styles.actionButton}>
            <Ionicons name="bookmark-outline" size={20} color="#64748b" />
            <Text style={styles.actionText}>收藏</Text>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8fafc',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    paddingVertical: 15,
    backgroundColor: '#ffffff',
    borderBottomWidth: 1,
    borderBottomColor: '#e2e8f0',
  },
  backButton: {
    padding: 4,
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#1e293b',
  },
  deleteButton: {
    padding: 4,
  },
  placeholder: {
    width: 28,
  },
  loadingContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  loadingText: {
    fontSize: 16,
    color: '#64748b',
  },
  content: {
    flex: 1,
    padding: 20,
  },
  messageCard: {
    backgroundColor: '#ffffff',
    borderRadius: 12,
    padding: 20,
    marginBottom: 20,
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 1,
  },
  messageHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 20,
  },
  messageAvatar: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: '#f0f9ff',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 12,
  },
  messageInfo: {
    flex: 1,
  },
  messageTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#1e293b',
    marginBottom: 4,
  },
  messageTime: {
    fontSize: 14,
    color: '#94a3b8',
  },
  messageContent: {
    borderTopWidth: 1,
    borderTopColor: '#f1f5f9',
    paddingTop: 20,
  },
  messageText: {
    fontSize: 16,
    color: '#374151',
    lineHeight: 24,
  },
  actions: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: '#ffffff',
    borderRadius: 12,
    paddingVertical: 16,
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 1,
  },
  actionButton: {
    alignItems: 'center',
    paddingVertical: 8,
    paddingHorizontal: 16,
  },
  actionText: {
    fontSize: 12,
    color: '#64748b',
    marginTop: 4,
  },
});
